<template>
    <div>
        <el-row>
            <el-col :span="span1">
                <el-card class="box-card" style="margin-right:5px;">
                    <div v-for="o in categories" :key="o.id" class="text item item1" @click.item="checkClick(o)"
                        :class="{ 'hover': o.id == check_id }">
                        {{ o.name }}
                    </div>
                </el-card>
            </el-col>
            <el-col :span="span2">
                <el-card class="box-card">
                    <el-table :data="list">
                        <el-table-column label="键">
                            <template #default="scope">
                                <el-input v-model="scope.row.name"></el-input>
                            </template>
                        </el-table-column>
                        <el-table-column label="值">
                            <template #default="scope">
                                <el-input v-model="scope.row.value" type="number"></el-input>
                            </template>
                        </el-table-column>
                        <el-table-column label="操作">
                            <template #default="scope">
                                <el-button type="success" v-if="scope.row.id"
                                    @click.stop="updateclick(scope.row)">修改</el-button>
                                <el-button type="primary" v-else @click.stop="addclick(scope.row)">添加</el-button>

                                <el-button type="warning" @click.stop="removeclick(scope.row)" v-if="scope.row.id>0">删除</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                </el-card>
            </el-col>
        </el-row>
    </div>
</template>
<script>
export default {
    data() {
        return {
            check_id: 0,
            categories: [],
            list: [],
            span1: 0,
            span2: 0
        }
    },
    methods: {
        checkClick(item) {
            this.check_id = item.id;
            this.search();
        },
        search() {
            this.$api.dictionary.search(this.check_id).then(({ msg }) => {
                var data = [{ category: this.check_id, name: '', value: 0 }].concat(msg);
                console.log(data);
                this.list = data;
            });
        },
        addclick(row) {

            this.$api.dictionary.add(row).then(({ state, msg }) => {
                this.$message[state ? 'success' : 'warning'](msg);
                if (state) this.search();
            })
        },
        updateclick(row) {
            this.$api.dictionary.update(row).then(({ state, msg }) => {
                this.$message[state ? 'success' : 'warning'](msg);
                if (state) this.search();
            })
        },
        removeclick({ id }) {
            this.$confirm('确定要删除当前数据吗？').then(() => {
                this.$api.dictionary.remove(id).then(({ state, msg }) => {
                    this.$message[state ? 'success' : 'warning'](msg);
                    if (state) this.search();
                });
            });

        }
    },
    mounted() {
        this.$api.enum.dictionary_category().then(({ msg }) => {
            this.categories = msg;
            if (msg && msg.length > 0) {
                this.checkClick(msg[0]);
            }
        });
        const wresize = () => {
            if (window.innerWidth > 1800) {
                this.span1 = 3;
                this.span2 = 21;
                return;
            }
            if (window.innerWidth > 768) {
                this.span1 = 8;
                this.span2 = 16;
                return;
            }
            this.span1 = 24;
            this.span2 = 24;
        };
        window.onresize = wresize;
        wresize();
    }
}
</script>
<style lang="scss">
.item {
    height: 60px;
    line-height: 60px;
    border-bottom: 1px dotted #ccc;
    text-indent: 10px;
    cursor: pointer;

    &:hover {
        background-color: #eee;
    }

    &.hover {
        background-color: #ddd;
    }
}
</style>